<template>
<div class="home">
  <div class="todoapp">
    <Header />
    <Main @getUnfinishCount="getUnfinishCount" :type="type" @showClearComplated="showClearComplated" />
    <Footer :unfinishCount="unfinishCount" @change="change" :isShowClearComplated="isShowClearComplated" />
  </div>
  <div class="info">
    <p>Double-click to edit a todo</p>
    <!-- Remove the below line ↓ -->
    <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    <!-- Change this out with your name and url ↓ -->
    <p>Created by <a href="http://todomvc.com">you</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Header from '../components/Header.vue'
import Main from '../components/main.vue'
import Footer from '../components/Footer.vue'

@Component({
  components: {
    Header, Main, Footer
  }
})

export default class Home extends Vue {
  unfinishCount = 0
  type = 'All'
  isShowClearComplated = true
  getUnfinishCount (unfinishCount: number) {
    this.unfinishCount = unfinishCount
  }

  change (type: string) {
    this.type = type
  }

  showClearComplated (isShowClearComplated: boolean) {
    this.isShowClearComplated = isShowClearComplated
  }
}
</script>
